<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="这是一个作用于 webpack 的快速开发手脚架。将 webpack 的配置拆解并提供更加直观的方法去使用它。">
    <meta name="keywords" content="webpack, PDWebpack, fybug, web, html, webDev">
    <title>PDWebpack</title>
    <link rel="icon" href="./static/img/PDWebpack.png">
</head>
<body>

<!-- 顶栏 -->
<header></header>

<!-- 内容部分 -->
<section class="grid-y grid-padding-x off-canvas-content" data-off-canvas-content>
    <!-- 标题区 -->
    <tit class="cell grid-y align-center flutitle">
        <div class="cell grid-x text-center padding-horizontal-2">
            <!-- 标题 -->
            <div class="cell">
                <h1 class="cell font-bold font-wide">PDWebpack</h1>
                <!-- 简介 -->
                <h6 class="margin-vertical-1 cell">这是一个面向框架开发、作用于 webpack 的快速开发手脚架。将 webpack
                    的配置拆解并提供工具去生成它。</h6>
            </div>

            <!-- 按钮 -->
            <div class="cell button-group margin-top-1 align-center hollow no-gaps">
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://gitee.com/PatternDirClean/PDWebpack"
                   style="border-radius: 999rem 0 0 999rem">
                    <h5 class="margin-bottom-0">gitee</h5></a>
                <a class="button padding-vertical-1 padding-horizontal-2" target="_blank"
                   href="https://github.com/PatternDirClean/PDWebpack"
                   style="border-radius: 0 9999rem 9999rem 0">
                    <h5 class="margin-0">github</h5></a>
            </div>
        </div>
    </tit>

    <!-- 快速装载介绍 -->
    <section class="cell grid-x align-center loads" id="haoload">
        <div class="cell grid-x small-12 large-6 align-center">
            <div class="cell show-for-medium small-2 grid-y align-center">
                <h2 class="font-bold"><i class="fa-2x fa fa-download"></i></h2>
            </div>
            <div class="cell medium-10 small-12 grid-y align-center">
                <h2 class="font-bold"><i
                        class="fa-2x fa fa-download hide-for-medium margin-right-1"></i>简易装载</h2>
                <p>使用内置的加载模块代替直接输入配置。整合多个常用模块提供完整的原生体验。更易使用，且具有更高的可读性。</p>
            </div>
        </div>
        <div class="cell small-12 large-6 grid-y align-center">
            <h4><b>> ></b> 原生 webpack</h4>
            <pre><code class="code-block width-100">entry: {
    app:<span style="color: #ff4b00">"main.js"</span>,
    index:<span style="color: #ff4b00">"index.js"</span>
},
plugins: [
    <span style="color: #0050ff">new</span> ScriptExtHtmlWebpackPlugin({defer: [<span
                        style="color: #ff4b00">'main'</span>, <span
                        style="color: #ff4b00">'index'</span>]}, HtmlWebpackPlugin)
]</code></pre>
            <h4><b>> ></b> 函数化加载</h4>
            <pre><code class="code-block width-100">confload.<span
                    style="color: darkgoldenrod">runOf</span>(<span
                    style="color: #ff4b00">"ModeLoad"</span>, (mode) => {
    mode.<span style="color: darkgoldenrod">addMode</span>(<span style="color: #ff4b00">"app"</span>, <span
                        style="color: #ff4b00">"main.js"</span>, <span style="color: #ff4b00">"defer"</span>);
    mode.<span style="color: darkgoldenrod">addMode</span>(<span
                        style="color: #ff4b00">"index"</span>, <span style="color: #ff4b00">"index.js"</span>, <span
                        style="color: #ff4b00">"defer"</span>);
});</code></pre>
            <blockquote>以上代码编写在 run.js 中</blockquote>
        </div>
    </section>

    <!-- 模块处理介绍 -->
    <section class="cell grid-x align-center loads" id="modeload">
        <div class="cell grid-x small-12 large-6 align-center">
            <div class="cell show-for-medium small-2 grid-y align-center"
                 style="margin-left: -1.5rem;margin-right: 1.5rem">
                <h2 class="font-bold"><i class="fa-2x fa fa-cubes"></i></h2>
            </div>
            <div class="cell medium-10 small-12 grid-y align-center">
                <h2 class="font-bold"><i
                        class="fa-2x fa fa-cubes hide-for-medium margin-right-1"></i>处理模块</h2>
                <p>内置加载模块系统，整合同一种文件的多种处理模块和加载方式。可添加自己的模块或基于当前模块进行变形，并通过配置加载模块管理。</p>
            </div>
        </div>
        <div class="cell small-12 large-6 grid-y align-center">
            <h4><b>> ></b> 启动 confload 进行多模块加载</h4>
            <pre><code class="code-block width-100"><span style="color: #0fad1f">// 加载 js 文件</span>
confload.<span style="color: darkgoldenrod">runOf</span>(<span
                        style="color: #ff4b00">"ModeLoad"</span>, (mode) => {
    mode.<span style="color: darkgoldenrod">addMode</span>(<span style="color: #ff4b00">"app"</span>, <span
                        style="color: #ff4b00">"main.js"</span>, <span style="color: #ff4b00">"defer"</span>);
    mode.<span style="color: darkgoldenrod">addMode</span>(<span
                        style="color: #ff4b00">"index"</span>, <span style="color: #ff4b00">"index.js"</span>, <span
                        style="color: #ff4b00">"defer"</span>);
    <span style="color: #0fad1f">// 切换加载用的模块</span>
    <span style="color: #0050ff">return</span> <span style="color: #ff4b00">"PageLoad"</span>
}).then((paloa) => {
    <span style="color: #0fad1f">// 加载页面</span>
    paloa.<span style="color: darkgoldenrod">addPage</span>(<span
                        style="color: #ff4b00">"index"</span>, <span style="color: #ff4b00">"index.html"</span>, [<span
                        style="color: #ff4b00">"index"</span>], {title: <span
                        style="color: #ff4b00">"index"</span>}, {pubchuncks: <span
                        style="color: #0050ff">false</span>});
    paloa.<span style="color: darkgoldenrod">addPage</span>(<span
                        style="color: #ff4b00">"main"</span>, <span style="color: #ff4b00">"main.html"</span>);
});</code></pre>
            <blockquote>以上代码编写在 run.js 中</blockquote>
        </div>
    </section>

    <!-- 框架配置介绍 -->
    <section class="cell grid-x align-center loads" id="frameconf">
        <div class="cell grid-x small-12 large-6 align-center">
            <div class="cell show-for-medium small-2 grid-y align-center"
                 style="margin-left: -1rem;margin-right: 1rem">
                <h2 class="font-bold"><i class="fa-2x fa fa-cogs"></i></h2>
            </div>
            <div class="cell medium-10 small-12 grid-y align-center">
                <h2 class="font-bold"><i
                        class="fa-2x fa fa-cogs hide-for-medium margin-right-1"></i>独立后的配置</h2>
                <p>将多项全局重复的数据独立到配置文件中，可通过 devtool 项单独设置开发环境配置</p>
            </div>
        </div>
        <div class="cell small-12 large-6 grid-y align-center">
            <pre><code class="code-block width-100"><span style="color:#ffa8f6;">global</span>.Conf = {
    <span style="color: #42d046">/** 加载模块加载顺序 */</span>
    configload: [<span style="color: #ff7561">'ModeLoad'</span>, <span style="color: #ff7561">'PageLoad'</span>],

    <span style="color: #42d046">// js 模块输出配置</span>
    jsOut: { outName: <span style="color: #ff7561">'[id][name][contenthash:8].js'</span> },

    <span style="color: #42d046">/** 开发者模式下的专属配置 */</span>
    devtool: {
        <span style="color: #42d046">/** 测试状态模块输出名称 */</span>
        jsOut: {outName: <span style="color: #ff7561">'[name][hash:9][id].js'</span>},

        <span style="color: #42d046">/** 测试服务器端口 */</span>
        port: <span style="color: #69f373">3000</span>,
        <span style="color: #42d046">/** 测试服务器访问地址 */</span>
        host: <span style="color: #ff7561">"localhost"</span>
    }
};</code></pre>
            <blockquote>以上代码编写在 cofig / conf.js 中</blockquote>
        </div>
    </section>

    <!-- 使用方法 -->
    <section class="cell grid-x padding-vertical-2 align-center padding-horizontal-2">
        <div id="users" class="cell grid-y align-center">
            <h3>使用</h3>
            <blockquote>安装 Node.js 作为 webpack 的运行环境</blockquote>
            <b>前往 github/gitee 发行版下载源码包或直接 clone 主分支的源码作为项目使用即可</b>
            <p>在项目文件夹下运行
                <code class="code-block"><span style="color: crimson">npm</span> <span
                        style="color:#ff4b00;">-y init</span><br/>
                    <span style="color: crimson">npm</span> <span style="color:#ff4b00;">install --save-dev</span></code>
                初始化项目配置并安装依赖即可开始使用
            </p>
            <p>详细使用请查看 git wiki 文档</p>
            <div class="grid-x">
                <a href="https://gitee.com/PatternDirClean/PDWebpack/wikis/" class="cell">gitee
                    wiki</a>
                <a href="https://github.com/PatternDirClean/PDWebpack/wiki" class="cell">github
                    wiki</a>
            </div>
        </div>
    </section>

</section>

<footer class="grid-y text-center align-center">
    <div class="cell grid-x grid-margin-x align-center">
        <!-- 项目位置连接 -->
        <div class="cell medium-shrink small-12 grid-y align-center">
            <h5 class="cell"><u><a
                    href="https://github.com/fybug">github</a></u>
                / <u><a
                        href="https://gitee.com/fybug">gitee</a></u> @ fybug</h5>
        </div>
        <!-- 说明 -->
        <div class="cell shrink grid-y align-center">
            <p class="cell margin-0">PDWebpack by 2019</p>
            <p class="cell margin-0">web code of the 2020</p>
        </div>
    </div>
    <hr class="cell margin-bottom-0"/>
    <h4 class="margin-top-1">使用下列项目搭建</h4>
    <div class="cell grid-x align-center text-center">
        <p class="cell large-2 medium-3">Foundation v6.6.3</p>
        <p class="cell large-2 medium-3">font-awesome v4.7.0</p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/aout.ass">aout.ass
            v0.0.1</a></u></p>
        <p class="cell large-2 medium-3"><u><a href="https://gitee.com/fybug/vhannels">vhannels
            v0.0.1</a></u></p>
    </div>
</footer>

</body>
</html>